<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>兑换记录</span>
      </div>

      <div class="filter-container">
        <el-input v-model="listQuery.user" :placeholder="'请输入用户信息'" clearable style="width: 200px;margin-right: 10px;" class="filter-item" @keyup.enter.native="handleFilter" />
    
        <el-input v-model="listQuery.goods" :placeholder="'请输入商品信息'" clearable style="width: 200px;margin-right: 10px;" class="filter-item" @keyup.enter.native="handleFilter" />
        <el-select v-model="listQuery.status" style="margin-right: 10px;" placeholder="发货状态" clearable>
            <el-option label="待发货" :value="0"></el-option>
            <el-option label="已发货" :value="1"></el-option>
        </el-select>

        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
          {{ '搜索' }}
        </el-button>
        <el-button v-waves :disabled="!checkPermission(['question.export'])"  type="success" icon="el-icon-upload2" @click="handleExport">
            {{ '导出' }}
        </el-button>
      </div>

      <el-table
        v-loading="listLoading"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
        row-key="id"
        :tree-props="{children: 'children'}"
      >

        <el-table-column width="100" label='编号'>
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column  label='用户'  align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.nickname }}</span>
          </template>
        </el-table-column>

         <el-table-column  label='奖品名称' align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.goods_name}}</span>
          </template>
        </el-table-column>

         <el-table-column  label='领取状态' align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.status_text}}</span>
            <br />
            <span v-if="scope.row.status == 2 && scope.row.type == 1">物流单号：{{scope.row.express_no}}</span>
          </template>
        </el-table-column>
        <el-table-column  label='兑换时间' align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.create_time}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="250" :label="'操作'">
                <template slot-scope="scope">  
                    <el-button v-waves v-permission="['score.deliver']"  v-if="scope.row.status == 1" type="primary"  size='mini' icon="el-icon-edit" @click="handleDeliver(scope.$index, scope.row)">
                        {{ "发货" }}
                    </el-button>
                </template>
                </el-table-column>

      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </el-card>
     <el-dialog :title="'发货'" :visible.sync="dialogVisible"  width="30%" @close="getList" :close-on-click-modal=false>
                <el-form :model="deliver_data" :rules="rules" ref="form" label-width="120px" class="demo-ruleForm">
                    <el-form-item label="物流单号" prop="express_no">
                        <el-input v-model="deliver_data.express_no" placeholder="请输入物流单号" clearable></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('form')">确 定</el-button>
                </div>
         </el-dialog>
  </div>
</template>

<script>
import {export_excell} from '@/api/export_excell' // 导出
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import permission from '@/directive/permission/index.js' // 权限判断指令
import checkPermission from '@/utils/permission' // 权限判断函数
import { score_log,score_deliver} from '@/api/score'
import { parseTime } from '@/utils'
export default {
  name: 'question_record',
  components: { Pagination },
  directives: { waves, permission },
  filters: {
    parseTime
  },
  data() {
    return {
      list: [],
      prize : [],
      total: 0,
      select_ids:[],
      dialogVisible: false,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      rules: {
        express_no: [
          { required: true, message: '请输入物流单号', trigger: 'blur' }
        ]
      },
      deliver_data:{
        express_no:'',
        id:''
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
     handleExport(){
      //导出
           export_excell(process.env.VUE_APP_BASE_API + 'admin/score_log_export',this.listQuery);
      },
      handleDeliver(index, row) {
        this.dialogVisible = true,
        this.deliver_data.id = row.id
      },
      submitForm: function(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.dialogVisible = false
            score_deliver(this.deliver_data).then(res => {
              this.$message({
                message: '发货成功',
                type: 'success'
              })
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
    checkPermission,
    getList() {
      this.listLoading = true
      score_log(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

  }
}
</script>


